<template>
  <div>
    <!-- 
        通过变量的boolean值隐式转换，来判断是true还是false，为true时显示，为false时隐藏
        1. 变量是否必须是布尔值？ => 不必一定是布尔值，只需要查看它的隐式转化结果
                                    隐式转化为false的情况：0 / '' / NaN / null / undefined
        v-show="变量" 
        原理：给当前标签设置一个display:none; 来进行隐藏操作，原来的这个标签元素还存在于DOM树中

        v-if="变量"
        原理：直接将需要隐藏的元素从DOM树中删除
        还可以和 v-else-if 和 v-else进行连用，它的判断逻辑与 js中 if else 完全相同
        当使用v-if/v-else-if/v-else 时，他们之间必须是连续的兄弟标签

        *** 选择v-show和v-if的直接条件: 如果当前元素及内部子元素全是静态数据，那么使用v-show，除此以外全用v-if
     -->
    <div v-show="flag1">v-show</div>
    <div v-if="flag1">{{ msg }}</div>

    <div v-if="flag2 === 0">显示为0</div>
    <div v-else-if="flag2 === 1">显示为1</div>
    <div v-else-if="flag2 === 2">显示为2</div>
    <div v-else>显示为其他</div>

    <div></div>
  </div>
</template>

<script>
/*
    if () {} 
    else if () {} 
    else {}
*/
export default {
    name: 'DemoIndex7',
    data() {
        return {
            flag1: true,
            msg: '动态',
            flag2: 0
        }
    },
}
</script>

<style>

</style>

